import React, { Component } from "react";
import { Modal, message, Checkbox, Button } from "antd";
import "./popup.less";

export default class ConfirmTran extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
    };
  }
  request = window.request;

  handleCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  };

  confirm = () => {
    const {
      coinId,
      realName,
      toAccount,
      volume,
      fee,
      changeNo,
      onOk
    } = this.props;
    this.request(`/offline/change/confirm`, {
      body: {
        coinId,
        realName,
        toAccount,
        volume,
        fee,
        changeNo
      }
    }).then(json => {
      if (json.code === 10000000) {
        message.success("转账成功");
        onOk && onOk();
      } else {
        message.destroy();
        message.warn(json.msg);
      }
    });
  };

  handleOk = () => {
    const { checked } = this.state;
    if (checked) {
      this.confirm();
    } else {
      message.destroy();
      message.error("请先确认转账信息");
    }
  };

  onChange = e => {
    this.setState({ checked: e.target.checked });
  };

  render() {
    const { checked } = this.state;
    const { realName, toAccount, volume, fee, symbol } = this.props;
    return (
      <Modal
        visible
        wrapClassName="v-center-modal con-transf-popup"
        width={360}
        maskClosable={false}
        footer={null}
        onCancel={this.handleCancel}
      >
        <div className="con-transf-wrap">
          <h4>确认转账</h4>
          <ul>
            <li>
              <span>对方账户 : </span>
              <span>{toAccount}</span>
            </li>
            <li>
              <span>真实姓名 : </span>
              <span>{realName}</span>
            </li>
            <li>
              <span>
                转账数额(
                {symbol}) :{" "}
              </span>
              <span>{volume}</span>
            </li>
            <li>
              <span>
                手续费(
                {symbol}) :{" "}
              </span>
              <span>{fee}</span>
            </li>
          </ul>
          <div className="check-box">
            <Checkbox checked={checked} onChange={this.onChange}>
              我已确认转账信息
            </Checkbox>
          </div>
        </div>
        <div className="footer-btn">
          <Button onClick={this.handleCancel} size="large">
            取消
          </Button>
          <Button
            onClick={this.handleOk}
            size="large"
            type="primary"
          >
            确认
          </Button>
        </div>
      </Modal>
    );
  }
}
